<script setup>
import { computed, ref } from 'vue'
import Altimeter from './Altimeter.vue';
import Altimeter2 from './Altimeter2.vue';
import CompassRing from './CompassRing.vue';
let angle = ref(0)
const props = defineProps({
  instrumentsref: {
    type: Object,
    default: {
      attitude_head: 0, // 飞行器姿态 {"unit_name":"度 / °"}	飞行器姿态 head 角
      elevation: 0, // 海拔高度
      latitude: 0, // 飞行器纬度	{"unit_name":"度 / °"}	
      longitude: 0, // 飞行器经度	{"unit_name":"度 / °"}	
      height: 0, // 飞行器高度	{"unit_name":"度 / °"}	飞行器海拔高度
      speed_x: 0, // 当前飞行器 x 坐标方向的速度 {"unit_name":"米每秒 / m/s"}
      speed_y: 0, // 当前飞行器 y 坐标方向的速度 {"unit_name":"米每秒 / m/s"}
      speed_z: 0, // 当前飞行器 z 坐标方向的速度 {"unit_name":"米每秒 / m/s"}
      gimbal_pitch: 0, // 云台 pitch 角 {"unit_name":"度 / °"}	 倾斜度
      gimbal_roll: 0, // 云台 roll 角 {"unit_name":"度 / °"}	 翻滚
      gimbal_yaw: 0, // 云台 yaw 角 {"unit_name":"度 / °"}	 偏航
      targetpoint: 0, // 目标点距离
      windSpeed: 0, // 风速
      obstacle: 0, // 障碍物距离
      cameraHeight: 0, // 相机高度
    }
  },
});
const calculateHorizontalSpeed = computed(() => {
  let vx = props.instrumentsref.speed_x
  let vy = props.instrumentsref.speed_y
  return Number(Math.sqrt(vx * vx + vy * vy).toFixed(2)) || 0;
})
const targetpointFormatted = computed(() => {
  const value = props.instrumentsref?.targetpoint;
  return typeof value === 'number' ? Math.floor(value) : 0;
});

const attitude = computed(() => {
  let i = 0;
  if (props.instrumentsref.attitude_head < 0) {
    i = -props.instrumentsref.attitude_head
  } else if (props.instrumentsref.attitude_head > 0) {
    i = props.instrumentsref.attitude_head
  } else {
    i = 0
  }
  if (i % 1 !== 0) {
    // 四舍五入到一位小数
    return Math.round(i * 10) / 10;
  }
  return i
})
const elevation = computed(() => {
  let i = 0;
  if (props.instrumentsref.elevation < 0) {
    i = -props.instrumentsref.elevation
  } else if (props.instrumentsref.elevation > 0) {
    i = props.instrumentsref.elevation
  } else {
    i = 0
  }
  if (i % 1 !== 0) {
    // 四舍五入到一位小数
    return Math.round(i * 10) / 10;
  }
  return i
})
</script>
<template>
  <div class="big_box">
    <div class="left_content">
      <div class="text_box" v-show="targetpointFormatted > 0" style="width: 100%;height: 20%;">
        <div>目标点</div>
        <div>{{ targetpointFormatted }} m</div>
      </div>
      <div class="text_box" style="width: 100%;height: 80%;">
        <div>风速</div>
        <div>{{ instrumentsref.windSpeed || 0 }} m/s</div>
        <div style="height: 1vh;"></div>
        <div>速度</div>
        <div>{{ calculateHorizontalSpeed }} m/s</div>
      </div>
    </div>
    <div class="center_content">
      <div class="up_content">
        {{ attitude }}°
      </div>
      <div class="content">
        <div class="left">
          <!-- 飞行器高度  -->
          <Altimeter :altitude="instrumentsref.height"></Altimeter>
        </div>
        <div class="center">
          <!-- 无人机方向 -->
          <CompassRing :angle="-instrumentsref?.attitude_head || 0"></CompassRing>
        </div>
        <div class="right">
          <!-- 避障信息 -->
          <Altimeter2 :altitude="obstacle"></Altimeter2>
        </div>
      </div>
    </div>
    <div class="right_content">
      <div>垂直速度</div>
      <div>{{ instrumentsref.speed_z }} VS</div>
      <div style="height: 1vh;"></div>
      <!-- 海拔高度 -->
      <div style="font-size: 2vh;">{{ elevation }} ALT</div>
      <div style="height: 1vh;"></div>
      <div>起降点距离</div>
      <div>0 m</div>
    </div>
  </div>
</template>
<style scoped lang="scss">
.big_box {
  width: 100%;
  height: 100%;
  padding: 0.5vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5vh;

  .left_content {
    width: 15%;
    height: 100%;

    .text_box {
      font-size: 1.5vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding-left: 2vh;
      white-space: nowrap;
    }
  }

  .center_content {
    width: 55%;
    height: 100%;

    .up_content {
      height: 20%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 2.3vh;
    }

    .content {
      display: flex;
      height: 80%;

      .left {
        width: calc(20%);
        padding: 2vh 0;
      }

      .center {
        width: 60%;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .right {
        width: 20%;
        height: 100%;
        padding: 2vh 0;
        position: relative;

        .controls_content {
          transform: rotate(-90deg);
          transform-origin: left top;
          position: absolute;
          bottom: 5vh;
          left: 1vw;
        }
      }
    }
  }

  .right_content {
    width: 30%;
    height: 100%;
    font-size: 1.5vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 2vh;
    white-space: nowrap;
  }
}
</style>